<template>
  <div style="padding: 40px">

    <div style="margin: 10px 0;">
      <el-button type="primary" style="margin-left: 10px;" @click="add " v-if="userRole"   >新增</el-button>
    </div>


    <el-table :data="tableData" border stripe style="width: 100%;">
      <el-table-column type="index" label="通知ID" width="100px" />
    
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="content" label="内容" />
      <el-table-column fixed="right" label="操作" width="350" v-if="userRole" >
        <template #default="scope" >
          <!-- 编辑按钮  -->
          <el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
      
          <!-- 删除按钮 -->
          <el-popconfirm title="这段内容确定删除吗?" @onConfirm="handleDelete(scope.row.id)">
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

  <!-- 新增弹窗 -->
   <el-dialog :visible.sync="dialogVisible" title="新增预约" width="30%">
      <el-form :model="form" label-width="120px">
        <el-form-item label="标题">
          <el-input v-model="form.title" style="width: 70%"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input
            v-model="form.content" style="width: 70%"
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            >
          </el-input>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="save">确定</el-button>
        </span>
      </template>
    </el-dialog>


    <el-pagination class="page" @current-change="handleCurrentChange"
      :current-page.sync="currentPage" background :page-size="10" layout="prev, pager, next, jumper" :total="total">
    </el-pagination>



  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getNotificationAll,getNotificationAdd,getNotificationDelete ,getNotificationUpdate} from '@/http/notification.js'

export default {
  name: "Notice",

  data() {
    return {
      form: {
         "content": "",
         "title": ""
      },
      form1: {},
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      total: 0,
      currentPage: 1,
      pageSize: 5,
      tableData: [],
    }

  },
  created() {
    this.load()
  },

  methods: {
    async load() {
      const { code, message, data } = await getNotificationAll({
        current  : this.currentPage
      })
      this.tableData = data.records
      this.total = Number(data.total) 
    },
    add() {
      this.dialogVisible = true
      this.form = {}
    },
    // 确认添加
    async save() {
      const { code, message } = await getNotificationAdd(this.form)
      console.log(this.form)
      if (code == '0') {
        this.$message({
          type: "success",
          message: "添加成功"
        })
      } else {
        this.$message({
          type: "error",
          message: "添加失败"
        })
      }
      this.dialogVisible = false
      this.load()
    },
    // 编辑
    handleEdit(row) {
      console.log(row);
      this.form1 = { ...row }
      this.dialogVisible1 = true
    },
    // 确认修改
    async saveEdit() {
      
      const { code, message } = await getNotificationUpdate(this.form1)
      if (code == '0') {
        this.$message({
          type: "success",
          message: "修改成功"
        })
      } else {
        this.$message({
          type: "error",
          message: "修改失败"
        })
      }
      this.dialogVisible1 = false
      this.load()
    },
    async handleDelete(id) {
      const { code, message } = await getNotificationDelete({ id:id })
      if (code == '0') {
        this.$message({
          type: "success",
          message: "删除成功"
        })
      } else {
        this.$message({
          type: "error",
          message: message
        })
      }
      this.load()  // 删除之后重新加载表格的数据
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()

    },
    handleCurrentChange(pageNum) {
      this.currentPage = pageNum
      this.load()

    },
  },
  computed: {
    ...mapGetters({
      userRole: 'user/getUserRole'
    })
  }

}
</script>

<style></style>